<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <div id="pie-instance" class="pie-instance"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script type="text/babel">
  import echarts from 'echarts';
  // var echarts = require('echarts'); // 此方法需要在依赖中加入 echarts 的依赖: "echarts": "^4.4.0"

  export default {
    data() {
      return {
      }
    },
    methods: {
      getOpt: function () {
        return {

              tooltip : {
                  trigger: 'item'
              },
              bmap: {
                  center: [104.114129, 37.550339],
                  zoom: 5,
                  roam: true,
                  mapStyle: {
                      styleJson: [{
                          'featureType': 'water',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#d1d1d1'
                          }
                      }, {
                          'featureType': 'land',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#f3f3f3'
                          }
                      }, {
                          'featureType': 'railway',
                          'elementType': 'all',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'highway',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#fdfdfd'
                          }
                      }, {
                          'featureType': 'highway',
                          'elementType': 'labels',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'arterial',
                          'elementType': 'geometry',
                          'stylers': {
                              'color': '#fefefe'
                          }
                      }, {
                          'featureType': 'arterial',
                          'elementType': 'geometry.fill',
                          'stylers': {
                              'color': '#fefefe'
                          }
                      }, {
                          'featureType': 'poi',
                          'elementType': 'all',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'green',
                          'elementType': 'all',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'subway',
                          'elementType': 'all',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'manmade',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#d1d1d1'
                          }
                      }, {
                          'featureType': 'local',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#d1d1d1'
                          }
                      }, {
                          'featureType': 'arterial',
                          'elementType': 'labels',
                          'stylers': {
                              'visibility': 'off'
                          }
                      }, {
                          'featureType': 'boundary',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#fefefe'
                          }
                      }, {
                          'featureType': 'building',
                          'elementType': 'all',
                          'stylers': {
                              'color': '#d1d1d1'
                          }
                      }, {
                          'featureType': 'label',
                          'elementType': 'labels.text.fill',
                          'stylers': {
                              'color': '#999999'
                          }
                      }]
                  }
              },
              series : [
                  {
                      name: 'pm2.5',
                      type: 'scatter',
                      coordinateSystem: 'bmap',
                      data: convertData(data),
                      symbolSize: function (val) {
                          return val[2] / 10;
                      },
                      label: {
                          normal: {
                              formatter: '{b}',
                              position: 'right',
                              show: false
                          },
                          emphasis: {
                              show: true
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: 'purple'
                          }
                      }
                  },
                  {
                      name: 'Top 5',
                      type: 'effectScatter',
                      coordinateSystem: 'bmap',
                      data: convertData(data.sort(function (a, b) {
                          return b.value - a.value;
                      }).slice(0, 6)),
                      symbolSize: function (val) {
                          return val[2] / 10;
                      },
                      showEffectOn: 'render',
                      rippleEffect: {
                          brushType: 'stroke'
                      },
                      hoverAnimation: true,
                      label: {
                          normal: {
                              formatter: '{b}',
                              position: 'right',
                              show: true
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: 'purple',
                              shadowBlur: 10,
                              shadowColor: '#333'
                          }
                      },
                      zlevel: 1
                  }
              ]
        };
      },
    },
    mounted() {
      var data = [
          {name: '海门', value: 9}
      ];
      var geoCoordMap = {
          '海门':[121.15,31.89] 
      };

      var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                  res.push({
                      name: data[i].name,
                      value: geoCoord.concat(data[i].value)
                  });
              }
          }
          return res;
      };
      
      var dom = document.getElementById('pie-instance');

      var pieInstance = echarts.init(dom, {
        renderer: 'svg', // 支持 'canvas' 或者 'svg'
        width: dom.clientWidth, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
        height: dom.clientHeight, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
      });
      pieInstance.setOption(this.getOpt());
      window.addEventListener('resize',function() {pieInstance.resize()});

    }
  };
</script>
<style>
  .pie-instance {
    height: 80vh;
  }
</style>


